<template>
  <div class="cart">
    <h1>购物车</h1>
    <div v-if="cartItems.length === 0" class="empty-cart">
      购物车是空的，去 <router-link to="/home">首页</router-link> 看看吧
    </div>
    <div v-else>
      <div class="cart-items">
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <img :src="item.image" :alt="item.name">
          <div class="item-info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
            <p class="price">¥{{ item.price }}</p>
          </div>
          <button @click="removeFromCart(item)" class="remove-btn">删除</button>
        </div>
      </div>
      <div class="cart-summary">
        <p>总计: ¥{{ totalPrice }}</p>
        <button class="checkout-btn" @click="handleCheckout">结算</button>
      </div>
    </div>

    <!-- 物流状态弹窗 -->
    <div v-if="showShippingStatus" class="shipping-status">
      <div class="status-content">
        <h2>订单状态</h2>
        <div class="status-timeline">
          <div class="status-item" :class="{ active: true }">
            <div class="status-dot"></div>
            <div class="status-info">
              <h3>订单已确认</h3>
              <p>{{ formatDate(new Date()) }}</p>
            </div>
          </div>
          <div class="status-item" :class="{ active: shippingStatus >= 1 }">
            <div class="status-dot"></div>
            <div class="status-info">
              <h3>商品已发货</h3>
              <p>{{ shippingStatus >= 1 ? formatDate(new Date()) : '等待发货' }}</p>
            </div>
          </div>
          <div class="status-item" :class="{ active: shippingStatus >= 2 }">
            <div class="status-dot"></div>
            <div class="status-info">
              <h3>运输中</h3>
              <p>{{ shippingStatus >= 2 ? '正在配送' : '等待配送' }}</p>
            </div>
          </div>
          <div class="status-item" :class="{ active: shippingStatus >= 3 }">
            <div class="status-dot"></div>
            <div class="status-info">
              <h3>已送达</h3>
              <p>{{ shippingStatus >= 3 ? formatDate(new Date()) : '等待送达' }}</p>
            </div>
          </div>
        </div>
        <button class="close-btn" @click="showShippingStatus = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const cartItems = ref([])
const showShippingStatus = ref(false)
const shippingStatus = ref(0)

onMounted(() => {
  // 从 localStorage 获取购物车数据
  cartItems.value = JSON.parse(localStorage.getItem('cart') || '[]')
})

const totalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.price, 0)
})

const removeFromCart = (item) => {
  const index = cartItems.value.indexOf(item)
  if (index > -1) {
    cartItems.value.splice(index, 1)
    localStorage.setItem('cart', JSON.stringify(cartItems.value))
  }
}

const handleCheckout = () => {
  // 模拟结账过程
  showShippingStatus.value = true
  shippingStatus.value = 1
  
  // 模拟物流状态更新
  setTimeout(() => {
    shippingStatus.value = 2
  }, 3000)
  
  setTimeout(() => {
    shippingStatus.value = 3
  }, 6000)
  
  // 清空购物车
  cartItems.value = []
  localStorage.setItem('cart', '[]')
}

const formatDate = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.cart {
  padding: 20px;
}

.empty-cart {
  text-align: center;
  padding: 40px;
  color: #666;
}

.cart-items {
  margin-top: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  background: white;
  border-radius: 8px;
  margin-bottom: 10px;
}

.cart-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 20px;
}

.item-info {
  flex: 1;
}

.price {
  color: #e53935;
  font-weight: bold;
}

.remove-btn {
  background-color: #ff5252;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.cart-summary {
  margin-top: 20px;
  text-align: right;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.checkout-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 20px;
}

.checkout-btn:hover {
  background-color: #3aa876;
}

/* 物流状态样式 */
.shipping-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.status-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
}

.status-timeline {
  margin: 30px 0;
}

.status-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  opacity: 0.5;
}

.status-item.active {
  opacity: 1;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #42b983;
  margin: 6px 15px 0 0;
}

.status-info h3 {
  margin: 0;
  color: #333;
}

.status-info p {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 0.9em;
}

.close-btn {
  width: 100%;
  padding: 10px;
  background: #666;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background: #555;
}
</style> 